<template>
    <div class="goods-hot">
        <h3>{{ title }}</h3>
        <GoodsItem v-for="item in goodsArr" :key="item.name" :goods="item" />
    </div>
</template>
<script>
import { computed,ref } from 'vue'
import { useRoute } from 'vue-router'
import { findHotGoods } from '@/api/product'
import GoodsItem from '@/views/category/components/goods-item.vue'
export default {
    name: 'GoodsHot',
    components: {
        GoodsItem
    },
    props: {
        type: {
            type: Number,
            default: 1
        }
    },
    setup(props) {
        const route = useRoute()

        const titleObj = { 1: '24小时热销榜', 2: '周热销榜', 3: '总热销榜' }
        const title = computed(() => {
            return titleObj[props.type]
        })

        const goodsArr = ref([])
        findHotGoods({id:route.params.id,type:props.type,limit:3}).then(data =>{
            goodsArr.value = data.result
        })
        return { title,goodsArr }
    }
}
</script>
<style scoped lang="less">

</style>